<template>
	<view class="userinfo">
		<image src="userInfo.img" class="img" mode=""></image>
		<view class="userinfo-desc">
			<view class="userinfo-desc-name">
				<!-- {{ userInfo.userName }} -->
				张三
			</view>
			<view class="userinfo-desc-gray">
				昵称: <!-- {{ userInfo.userName }} -->张三
			</view>
			<view class="userinfo-desc-gray">
				微信号: <!-- {{ userInfo.wechatNumber }} --> 张三
			</view>
			<view class="userinfo-desc-gray">
				地区: <!-- {{ userInfo.address }} --> 陕西
			</view>
		</view>
	</view>
	<view class="perch"></view>
	<!-- <u-cell-group>
		<u-cell-item title="朋友圈" label="模拟数据暂不支持查看好友朋友圈" hover-class="none" :title-style="{ marginLeft: '10rpx' }"></u-cell-item>
		<u-cell-item title="更多信息" :title-style="{ marginLeft: '10rpx' }" @click="linkToMoreInfoMation"></u-cell-item>
	</u-cell-group>
	<view class="" v-if="!isItMe">
		<view class="perch"></view>
		<u-cell-group>
			<u-cell-item title="发消息" :arrow="false" :center="true" :title-style="{ marginLeft: '10rpx' }" @click="linkToChat">
				<u-icon slot="icon" name="chat" color="#366488" size="32"></u-icon>
			</u-cell-item>
		</u-cell-group>
	</view> -->
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				isItMe: false
			};
		},
		methods: {
			linkToChat() {
				// 实现跳转到聊天页面的逻辑
			}
		},
		// 使用onMounted代替onLoad
		onMounted() {
			this.initData();
		},
		methods: {
			initData() {
				const contact = this.$route.query; // 假设你是通过路由传递的数据
				if (contact.id == this._user_info.id) {
					this.userInfo = this._user_info;
					this.isItMe = true;
					return;
				}
				// 假设contact.data是一个字符串，需要解析
				const data = JSON.parse(contact.data);
				this.userInfo = data;
			}
		}
	}
</script>

<style>
	.perch {
		height: 10rpx;
	}

	.userinfo {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 20rpx 30rpx 40rpx 40rpx;
		background-color: #FFFFFF;
	}

	.img {
		display: block;
		width: 110rpx;
		height: 110rpx;
		border-radius: 10rpx;
	}

	.userinfo-desc {
		padding-left: 30rpx;
	}

	.userinfo-desc-name {
		font-weight: bold;
		font-size: 36rpx;
		transform: translateY(-20rpx);
	}

	.userinfo-desc-gray {
		color: #909399;
		font-size: 29rpx;
	}
</style>